<template>
  <el-dialog title="图表配置项" width="40%" v-model="dialogVisible" top="50px">
    <div class="panel" style="height: 600px;overflow-y: auto;padding: 10px">
      <el-form label-position="right" label-width="120px" label-suffix=":">
        <el-form-item label="数据主色">
          <el-row>
            <el-color-picker v-model="config.GlobalColor">
            </el-color-picker>
            <el-button type="primary" v-on:click="showColors" v-show="!disableMultiColor">颜色分配
            </el-button>
            <label v-show="!disableGlobalNoColor">
              <el-checkbox v-model="config.GlobalNoColor">透明背景</el-checkbox>
            </label>
          </el-row>
        </el-form-item>
        <el-form-item label="无障碍花纹">
          <el-switch
            class="enable-decal"
            v-model="shared.enableDecal" active-text="开启" inactive-text="关闭">
          </el-switch>
        </el-form-item>
        <el-form-item v-show="!disableValleyPeak" label="峰值警戒">
          <el-row>
            <el-checkbox v-model="config.peak.enable">启用</el-checkbox>
            <el-input-number
              v-model.number="config.peak.value"
            >
            </el-input-number>
            <el-color-picker v-model="config.peak.color"></el-color-picker>
          </el-row>
        </el-form-item>
        <el-form-item v-show="!disableValleyPeak" label="谷值警戒">
          <el-row>
            <el-checkbox v-model="config.valley.enable">启用</el-checkbox>
            <el-input-number
              v-model.number="config.valley.value"
            >
            </el-input-number>
            <el-color-picker v-model="config.valley.color"></el-color-picker>
          </el-row>
        </el-form-item>
        <el-form-item v-show="!disableAxisRotate" label="维度轴标签旋转">
          <el-input-number
            v-model.number="config.xAxisLabelRotate" :min="-90" :max="90"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item v-show="!disableXAxisName" label="维度轴名称">
          <el-row>
            <el-checkbox v-model="config.xAxisName.show"></el-checkbox>
            <el-input
              v-model.trim="config.xAxisName.name" style="width: 60%;"
            >
            </el-input>
          </el-row>
        </el-form-item>
        <el-form-item v-show="!disableYAxisName" label="度量轴名称">
          <el-row>
            <el-checkbox v-model="config.yAxisName.show"></el-checkbox>
            <el-input
              v-model.trim="config.yAxisName.name" style="width: 60%;"
            >
            </el-input>
          </el-row>
        </el-form-item>
        <el-form-item v-show="!disableYAxisName2" label="副度量轴名称">
          <el-row>
            <el-checkbox v-model="config.yAxisName2.show"></el-checkbox>
            <el-input
              v-model.trim="config.yAxisName2.name" style="width: 60%;"
            >
            </el-input>
          </el-row>
        </el-form-item>
        <el-form-item v-show="!disableScale" :label="config.scaleLabel || '缩放比例'">
          <el-input-number :min="0.01" :max="1" :step="0.01" v-model.number="config.scale"></el-input-number>
        </el-form-item>
        <el-form-item v-show="!disableScale" :label="config.outerScaleLabel || '外圈缩放比例'">
          <el-input-number :min="0.01" :max="1" :step="0.01" v-model.number="config.outerScale"></el-input-number>
        </el-form-item>
        <el-form-item v-show="!disableOuterScale" label="南丁格尔模式">
          <el-radio-group v-model="config.roseType">
            <el-radio label="">否</el-radio>
            <el-radio label="radius">圆心角及半径</el-radio>
            <el-radio label="area">仅半径</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图表边距" v-show="!disableChartPadding">
          <el-input v-model="config.chartPadding" placeholder="如：0px 10px 15px 10px（上右下左）"></el-input>
        </el-form-item>
        <el-form-item label="刻度线颜色" v-show="!disableAxis">
          <el-color-picker v-model="config.axisStyle.tickColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="刻度文字颜色" v-show="!disableAxis">
          <el-color-picker v-model="config.axisStyle.fontColor"></el-color-picker>
        </el-form-item>

        <el-form-item v-show="!disableAxis" label="刻度文字字体">
          <el-select v-model="config.axisStyle.fontFamily">
            <el-option v-for="font in fonts" :value="font.name" :label="font.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="!disableAxis" label="刻度文字字号">
          <el-input-number :min="10" :max="72" :step="2" v-model.number="config.axisStyle.fontSize"></el-input-number>
        </el-form-item>

        <el-form-item v-show="!disableAxisLineShow" label="显示刻度线">
          <el-checkbox v-model="config.showAxisLine">勾选显示</el-checkbox>
        </el-form-item>

        <el-form-item v-show="!disableAxisLabelShow" label="显示刻度标签">
          <el-checkbox v-model="config.showAxisLabel.category">维度</el-checkbox>
          <el-checkbox v-model="config.showAxisLabel.value">主度量</el-checkbox>
          <el-checkbox v-model="config.showAxisLabel.value2">副度量</el-checkbox>
        </el-form-item>

        <el-form-item v-show="!disableSplitLineShow" label="显示网格线">
          <el-checkbox v-model="config.showSplitLine">勾选显示</el-checkbox>
        </el-form-item>

        <el-form-item v-show="!disableSplitLineMode&&config.showSplitLine" label="网格线模式">
          <el-radio-group v-model="config.splitLineMode">
            <el-radio label="all">全部</el-radio>
            <el-radio label="left">主</el-radio>
            <el-radio label="right">次</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="!disableSplitLineShow" label="显示图例">
          <el-checkbox v-model="config.showLegend">勾选显示</el-checkbox>
        </el-form-item>

        <el-form-item v-show="!disableLegendPosition&&config.showLegend" label="图例位置">
          <el-select v-model="config.legendPosition">
            <el-option v-for="item in config.legendPostions" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="!disableLabel" label="显示标签">
          <el-radio-group v-model="config.textStyle.display">
            <el-radio label="block">是</el-radio>
            <el-radio label="none">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="!disableLabel" label="标签字体">
          <el-select v-model="config.textStyle['font-family']">
            <el-option v-for="font in fonts" :value="font.name" :label="font.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="!disableLabel" label="标签字号">
          <el-input-number :min="10" :max="72" :step="2"
                           v-model.number="config.textStyle['font-size']"></el-input-number>
        </el-form-item>

        <el-form-item label="标签字色" v-show="!disableLabel">
          <el-color-picker v-model="config.textStyle.fill"></el-color-picker>
        </el-form-item>

        <el-form-item v-show="!disableLabelRotate" label="标签旋转">
          <el-input-number :min="-90" :max="90" :step="1" v-model.number="config.labelRotate"></el-input-number>
        </el-form-item>

        <el-form-item v-show="!disableLabelPosition" label="标签位置">
          <el-radio-group v-model="config.labelPosition">
            <el-radio label="foot">底部</el-radio>
            <el-radio label="head">头部</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="!disableLabelFormat" label="标签格式">
          <el-select v-model="config.labelFormater">
            <el-option v-for="item in config.labelFormaterTemps" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="!disableFillArea" label="填充区域">
          <el-radio-group v-model="config.fillArea">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="!disableLineSmooth" label="折线平滑程度">
          <el-slider :min="0" :max="1" :step="0.01" v-model.number="config.lineSmooth"></el-slider>
        </el-form-item>

        <div class="form-group" v-show="!disableKPI">
          <label class="col-sm-3 control-label">考核方式</label>
          <div class="col-sm-9">
            <label class="radio-inline">
              <input type="radio" v-model="config.KPIType" value="-1">无考核
            </label>
            <label class="radio-inline">
              <input type="radio" v-model="config.KPIType" value="0">按年
            </label>
            <label class="radio-inline">
              <input type="radio" v-model="config.KPIType" value="1">按月
            </label>
            <label class="radio-inline">
              <input type="radio" v-model="config.KPIType" value="2">按日
            </label>
          </div>
        </div>
        <div class="form-group" v-show="!disableKPI">
          <label class="col-sm-3 control-label">定义指标</label>
          <div class="col-sm-9">
            <div class="col-sm-12" v-for="item in config.MultiKPIs">
              <div class="col-sm-2 control-label">
                {{ item.name }}
              </div>
              <div class="col-sm-10">
                <input type="number" min="0" class="form-control" v-model="item.value">
              </div>
            </div>
          </div>
        </div>

        <el-form-item v-show="!disableToolboxShow" label="显示工具条">
          <el-checkbox v-model="config.showToolbox">勾选显示</el-checkbox>
        </el-form-item>

        <el-form-item v-show="!disableValueRange" label="度量主轴值范围">
          <el-row>
            最小
            <el-input v-model="config.valueRange.min" placeholder="空值表示自动" style="width: 200px;margin-right: 30px">
            </el-input>
            最大
            <el-input v-model="config.valueRange.max" placeholder="空值表示自动" style="width: 200px;">
            </el-input>
          </el-row>
        </el-form-item>

        <el-form-item v-show="!disableValueRange" label="度量副轴值范围">
          <el-row>
            最小
            <el-input v-model="config.valueRange2.min" placeholder="空值表示自动" style="width: 200px;margin-right: 30px">
            </el-input>
            最大
            <el-input v-model="config.valueRange2.max" placeholder="空值表示自动" style="width: 200px;">
            </el-input>
          </el-row>
        </el-form-item>

        <el-form-item v-show="!disableBarBorderRadius" label="柱形圆滑半径">
          <el-row>
            ↖
            <el-input-number :min="0" v-model.number="config.barBorderRadius[0]"
                             v-on:change="barBorderRadiusChange"></el-input-number>
            ↗
            <el-input-number :min="0" v-model.number="config.barBorderRadius[1]"
                             v-on:change="barBorderRadiusChange"></el-input-number>
            ↘
            <el-input-number :min="0" v-model.number="config.barBorderRadius[2]"
                             v-on:change="barBorderRadiusChange"></el-input-number>
            ↙
            <el-input-number :min="0" v-model.number="config.barBorderRadius[3]"
                             v-on:change="barBorderRadiusChange"></el-input-number>
          </el-row>
        </el-form-item>

        <el-form-item v-show="!disableBarBorderRadius" label="柱形填充样式">
          <el-radio-group v-model="config.barFillStyle.mode">
            <el-radio :label="0">单色</el-radio>
            <el-radio :label="1">渐变</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="config.barFillStyle.mode===1" label="渐变方向">
          <el-radio-group v-model="config.barFillStyle.gradientDirection">
            <el-radio label="left">向左</el-radio>
            <el-radio label="top">向上</el-radio>
            <el-radio label="right">向右</el-radio>
            <el-radio label="bottom">向下</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="config.barFillStyle.mode===1" label="渐变起始颜色">
          <el-color-picker v-model="config.barFillStyle.gradientBeginColor"></el-color-picker>
        </el-form-item>

        <el-form-item label="轮播">
          <el-switch v-model="config.carousel.enable"></el-switch>
        </el-form-item>

        <el-form-item v-show="config.carousel.enable" label="轮播速度(毫秒)">
          <el-input-number v-model="config.carousel.speed"></el-input-number>
        </el-form-item>

      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
        <slot name="foot">
          <el-button type="primary" size="mini" v-on:click="confirm">确定</el-button>
          <el-button size="mini" @click="dialogVisible=false">取消</el-button>
        </slot>
    </span>
  </el-dialog>

  <color ref="color"></color>
</template>

<script>
import {ShareData} from "@/components/data/sharedata";
import {store} from "@/components/chart/common/store";
import color from "@/views/WorkBook/config/color";

export default {
  name: "config",
  components: {color},
  data() {
    return {
      dialogVisible: false,
      _workbook: {},
      shared: store,
      //弹窗的回调函数
      confirmCallBack: {},
      _currentChartMode: '',
      fonts: ShareData.Fonts,
      config: {
        GlobalColor: "#4E79A7",
        GlobalNoColor: false,
        scale: 0.12,
        scaleLabel: "缩放比例",
        roseType: "radius",
        MultiColors: [],
        axisStyle: {
          tickColor: "#e5e5e5",
          fontColor: "#999999",
          fontFamily: "Arial",
          fontSize: 12
        },
        textStyle: {
          "display": "block",
          "font-family": "Arial",
          "font-size": 12,
          "font-style": "normal",
          "font-weight": "normal",
          "fill": "#666",
          "position": "top" // "top", "right", "bottom" or "left"
        },
        //谷值
        valley: {enable: false, value: 0, color: "#FF0000"},
        //峰值
        peak: {enable: false, value: 100, color: "#FF3300"},
        xAxisLabelRotate: 0,
        fillArea: 0,
        //线图用的，填充区域样式
        fillAreaStyle: {
          mode: 0,
          gradientDirection: 'top',
          gradientBeginColor: 'transparent' //渐变起始颜色
        },
        mapModel: 0,
        labelRotate: 0,
        showSplitLine: true,
        showAxisLine: true,
        showAxisLabel: {
          category: true,
          value: true,
          value2: true
        },
        labelFormatter: "",
        labelFormatterTemps: [],
        showLegend: true,
        splitLineMode: "all",
        smtMode: "all",
        legendPosition: "top",
        legendPositions: [],
        outerScale: 0.9,
        outerScaleLabel: "外圈缩放比例",
        chartPadding: "30px 10px 15px 10px",
        MultiKPIs: [],
        KPIType: -1,
        xAxisName: {show: true, name: ""},
        yAxisName: {show: true, name: ""},
        yAxisName2: {show: true, name: ""},
        lineSmooth: 0,
        labelPosition: "foot",
        showToolbox: true,
        valueRange: {
          min: null,
          max: null
        },
        valueRange2: {
          min: null,
          max: null
        },
        barBorderRadius: [0, 0, 0, 0],
        //条图填充样式
        barFillStyle: {
          mode: 0,
          gradientDirection: 'top',
          gradientBeginColor: '#ffffff' //渐变起始颜色
        },
        //条图最大宽度
        barMaxWidth: 0,
        //轮播
        carousel: {}
      },
      disableScale: false,
      disableMultiColor: false,
      disableLabel: false,
      disableValleyPeak: true,
      disableAxis: false,
      disableAxisRotate: true,
      disableFillArea: true,
      disableLabelRotate: true,
      disableSplitLineShow: true,
      disableAxisLineShow: true,
      disableAxisLabelShow: true,
      disableLabelPosition: true,
      disableLabelFormat: true,
      disableShowLegend: true,
      disableSplitLineMode: true,
      disableSMTMode: true,
      disableLegendPosition: true,
      disableOuterScale: true,
      disableChartPadding: true,
      disableKPI: true,
      disableXAxisName: true,
      disableYAxisName: true,
      disableYAxisName2: true,
      disableLineSmooth: true,
      disableGlobalNoColor: true,
      disableToolboxShow: true,
      disableValueRange: true,
      disableBarBorderRadius: true,
      disableShowTop: true,
      disableMapModel: true
    }
  },
  methods: {
    //点击确认按钮，调用回调函数
    confirm() {
      this.dialogVisible = false
      if (this.confirmCallBack) {
        const config = this.config;
        this.confirmCallBack(config);
      }
    },
    //显示调色盘
    showColors() {
      this.$refs.color.show(this.config.MultiColors, colors => {
        this.config.MultiColors = colors
      })
    },
    barBorderRadiusChange() {
      for (let i = 0; i < this.config.barBorderRadius.length; i++) {
        if (typeof this.config.barBorderRadius[i] === "string") {
          this.config.barBorderRadius[i] = 0;
        }
      }
    },
    //显示图表配置界面
    show(config, callback, workbook) {
      this.dialogVisible = true;
      this.confirmCallBack = callback;
      if (config) {
        _.merge(this.config, config)
        this._workbook = workbook
        this.fitCheck(this.config);
      }
    },
    //决定展示哪些配置项
    fitCheck(config) {
      let _workbook = this._workbook
      config.chartMode = _workbook.chartMode
      //有缩放比例配置的图表模式
      let modes_scale = [1, 3, 4, 21];
      //有多色配置的图表模式
      let modes_multicolor = [0, 1, 2, 3, 4, 5, 7, 8, 11, 14, 15, 16, 17, 20, 21, 22, 23];
      //没有标签配置的图表模式
      let modes_nolabel = [9, 10, 12, 13, 19, 23, 26, 27];
      //可以设置警戒值的图表模式
      let modes_valleypeak = [1];
      //没有刻度线的图表模式
      let modes_noaxis = [2, 3, 6, 8, 9, 11, 17, 18, 19, 20, 22, 23];
      //有轴标签旋转角度
      let modes_xAxisLabelRotate = [0, 1, 4, 5, 21];
      //有填充区域设置的图表
      let modes_fillarea = [0, 5, 14];
      //有标签旋转的图表
      let modes_labelRotate = [1, 4, 21];
      //有网格线显示设置的图表
      let modes_showSplitLine = [0, 1, 4, 5, 21];
      //有刻度线显示设置的图表
      let modes_showAxisLine = [0, 1, 4, 5, 21];
      //有轴标签显示设置的图表
      let modes_showAxisLabel = [0, 1, 4, 5, 21];
      //有标签位置设置的图表
      let modes_labelPosition = [1, 4, 21];
      //有标签格式设置的图表
      let modes_labelFormat = [0, 1, 3, 4, 8, 22];
      //有图例显示控制的图表
      let modes_showLegend = [0, 1, 3, 4, 5, 14, 21, 26];
      //网格线显示模式
      let modes_splitLineMode = [0, 1];
      //图例位置
      let modes_legendPosition = [0, 1, 3, 4, 5, 14, 17, 21, 26];
      //外圈缩放比例
      let modes_outerScale = [3];
      //图表间距
      let modes_chartPadding = [0, 1, 4, 5, 21];
      //有KPI
      let modes_KPI = [19];
      //维度轴名称
      let modes_xAxisName = [0, 1, 4, 5, 21];
      //度量轴名称
      let modes_yAxisName = [0, 1, 4, 5, 21];
      //副度量轴名称
      let modes_yAxisName2 = [0, 1];
      //折线平滑
      let modes_linesmooth = [0, 1, 5];
      //主色透明
      let modes_globaNoColor = [27];
      //显示工具条
      let modes_showToolbox = [1, 4, 21];
      //值范围
      let modes_ValueRange = [0, 1];
      //条图边框圆滑
      let modes_BarBorderRadius = [1, 4, 21];
      this.disableScale = !modes_scale.includes(config.chartMode);
      this.disableMultiColor = !modes_multicolor.includes(config.chartMode);
      this.disableLabel = modes_nolabel.includes(config.chartMode);
      this.disableAxis = modes_noaxis.includes(config.chartMode);
      this.disableAxisRotate = !modes_xAxisLabelRotate.includes(config.chartMode);
      this.disableFillArea = !modes_fillarea.includes(config.chartMode);
      this.disableLabelRotate = !modes_labelRotate.includes(config.chartMode);
      this.disableSplitLineShow = !modes_showSplitLine.includes(config.chartMode);
      this.disableAxisLineShow = !modes_showAxisLine.includes(config.chartMode);
      this.disableAxisLabelShow = !modes_showAxisLabel.includes(config.chartMode);
      this.disableLabelPosition = !modes_labelPosition.includes(config.chartMode);
      this.disableLabelFormat = !modes_labelFormat.includes(config.chartMode);
      this.disableShowLegend = !modes_showLegend.includes(config.chartMode);
      this.disableSplitLineMode = !modes_splitLineMode.includes(config.chartMode);
      this.disableLegendPosition = !modes_legendPosition.includes(config.chartMode);
      this.disableOuterScale = !modes_outerScale.includes(config.chartMode);
      this.disableChartPadding = !modes_chartPadding.includes(config.chartMode);
      this.disableKPI = !modes_KPI.includes(config.chartMode);
      this.disableXAxisName = !modes_xAxisName.includes(config.chartMode);
      this.disableYAxisName = !modes_yAxisName.includes(config.chartMode);
      this.disableYAxisName2 = !modes_yAxisName2.includes(config.chartMode);
      this.disableLineSmooth = !modes_linesmooth.includes(config.chartMode);
      this.disableGlobalNoColor = !modes_globaNoColor.includes(config.chartMode);
      this.disableToolboxShow = !modes_showToolbox.includes(config.chartMode);
      this.disableValueRange = !modes_ValueRange.includes(config.chartMode);
      this.disableBarBorderRadius = !modes_BarBorderRadius.includes(config.chartMode);
      if (config.chartMode === 1) {
        if (_workbook.isYoy) {
          this.disableLineSmooth = false;
          this.disableLabelFormat = false;
        } else {
          this.disableLineSmooth = true;
          this.disableLabelFormat = true;
        }
      }
      if (_workbook && config.chartMode !== 19) {
        if (config.chartMode == 1) {
          this.disableValleyPeak = !modes_valleypeak.includes(config.chartMode) && !_workbook.isYoy;
        } else if (config.chartMode == 0) {
          this.disableValleyPeak = true;
        }
      } else {
        this.disableValleyPeak = true;
      }
    },
  }
}
</script>

<style scoped>
.modalChartConfig .tab-content {
  background-color: #fafafa;
  border: 1px solid #ddd;
  padding: 8px;
}

.modalChartConfig .form-control {
  width: 75% !important;
}

.modalChartConfig .globalColor {
  float: left;
  margin-right: 20px;
  width: 70% !important;
}

h4, .h4 {
  font-size: 14px !important;
}


</style>
